<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
      :close-on-click-modal="false" draggable>
      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
       <el-row :gutter="24">
    <!-- <el-col :span="12" class="mb20">
      <el-form-item label="所属辖区" prop="regionNo">
        <el-input v-model="form.regionNo" placeholder="请输入所属辖区"/>
      </el-form-item>
      </el-col> -->

    <el-col :span="12" class="mb20">
      <el-form-item label="所属子站" prop="substationId">
        <el-input v-model="form.substationId" style="display: none;"  placeholder="请输入所属子站"/>
        <el-input v-model="form.substationName" style="display: none;"  placeholder="请输入所属子站"/>
        <el-text  >{{ form.substationName }}</el-text>
        <el-button type="primary"   @click="selectRelateSubstation">选择</el-button>
        <el-button type="primary"   @click="clearRelateSubstation">清除</el-button>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="设备编码" prop="equipmentNo">
        <el-input v-model="form.equipmentNo" placeholder="请输入设备编码"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="设备型号" prop="modelNumber">
        <el-input v-model="form.modelNumber" placeholder="请输入设备型号"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="设备类型" prop="type">
          <el-select filterable clearable v-model="form.type" placeholder="请选择设备类型">
            <el-option :value="item.value*1" :label="item.label" v-for="(item, index) in equipment_type" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="生产厂家" prop="manufacturer">
        <el-input v-model="form.manufacturer" placeholder="请输入生产厂家"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="维护单位" prop="maintenanceUnit">
        <el-input v-model="form.maintenanceUnit" placeholder="请输入维护单位"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="维护人" prop="maintenancePerson">
        <el-input v-model="form.maintenancePerson" placeholder="请输入维护人"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="维护人联系方式" prop="maintenanceContact">
        <el-input v-model="form.maintenanceContact" placeholder="请输入维护人联系方式"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="设备状态" prop="status">
          <el-select filterable clearable v-model="form.status" placeholder="请选择设备状态">
            <el-option :value="item.value*1" :label="item.label" v-for="(item, index) in equipment_status" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

    <!-- <el-col :span="12" class="mb20">
      <el-form-item label="是否在线" prop="isOnline">
           
        </el-form-item>
      </el-col> -->

			</el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog width="100%"
    class="substation-dialog" title="选择子站" v-model="substationVisible"
       draggable>
    <substation ref="substationRef" @getSubstationId="getSubstationId" :isReleteSelect="true" ></substation>
    </el-dialog>
</template>

<script setup lang="ts" name="EquipmentDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/environment/equipment'
import { rule } from '/@/utils/validate';
import { fa } from 'element-plus/es/locale';
const emit = defineEmits(['refresh']);
const substation = defineAsyncComponent(() => import('/@/views/environment/substation/index.vue'));
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const substationVisible = ref(false)
const loading = ref(false)
const substationRef = ref()
// 定义字典
const { equipment_status,equipment_type } = useDict('equipment_status','equipment_type')

// 提交表单数据
const form = reactive({
		id:'',
	  regionNo: '',
	  substationId: '',
    substationName:'',
	  name: '',
	  equipmentNo: '',
	  modelNumber: '',
	  type: '',
	  manufacturer: '',
	  maintenanceUnit: '',
	  maintenancePerson: '',
	  maintenanceContact: '',
	  status: '',
	  isOnline: '',
});

// 定义校验规则
const dataRules = ref({
        //regionNo: [{required: true, message: '所属辖区不能为空', trigger: 'blur'}],
        substationId: [{required: true, message: '所属子站不能为空', trigger: 'blur'}],
        name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
        equipmentNo: [{required: true, message: '设备编码不能为空', trigger: 'blur'}],
        //modelNumber: [{required: true, message: '设备型号不能为空', trigger: 'blur'}],
        type: [{required: true, message: '设备类型不能为空', trigger: 'blur'}],
       // manufacturer: [{required: true, message: '生产厂家不能为空', trigger: 'blur'}],
        //maintenanceUnit: [{required: true, message: '维护单位不能为空', trigger: 'blur'}],
        //maintenancePerson: [{required: true, message: '维护人不能为空', trigger: 'blur'}],
        //maintenanceContact: [{required: true, message: '维护人联系方式不能为空', trigger: 'blur'}],
        status: [{required: true, message: '设备状态不能为空', trigger: 'blur'}],
        //isOnline: [{required: true, message: '是否在线不能为空', trigger: 'blur'}],
})
//打开子站选择
const selectRelateSubstation = ()=>{
  substationVisible.value=true;
  
};
const getSubstationId =(row)=>{
  console.log('getSubstationId row:'+row);
  form.substationId=row.id;
  form.substationName=row.name;
  form.regionNo=row.regionNo;
  substationVisible.value=false;
}

const clearRelateSubstation=()=>{
  form.substationId='';
  form.substationName='';
}

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''
  clearRelateSubstation()

  // 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

  // 获取equipment信息
  if (id) {
    form.id = id
    getequipmentData(id)
  }
};

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;
  console.log('form:'+form)
	try {
    loading.value = true;
		form.id ? await putObj(form) : await addObj(form);
		useMessage().success(form.id ? '修改成功' : '添加成功');
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getequipmentData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>
<style lang="less" scope>

.substation-dialog {
    // display: flex;
    // justify-content: center;
    // align-items: Center;
    overflow: hidden;
    height: 100%;
    .el-dialog {
        margin: 0 auto !important;
        position: relative;
       
        .el-dialog__header{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            width: 100%;
            height: 60px;
            z-index: 1;
        }
        .el-dialog__body {
            width: 100%;
            overflow: hidden;
            overflow-y: auto;
            max-height: 90vh;//最大高度为视口高度的90%
            padding-top: 80px;
            padding-bottom: 100px;
            z-index: 1;            
        }
        .el-dialog__footer{
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 80px;
            z-index: 1;
        }
    }
}


</style>  